<template>
	<view class="focus">
		<view v-if="userList.length != 0" class="item" v-for="(item, index) in userList" :key="index">
			<view class="image">
				<image :src="BASE_IMG+item.avatar"></image>
			</view>
			<view class="cent">
				<text class="nick">{{ item.userName }}</text>
				<!-- <text class="text">{{ item.text }}</text> -->
			</view>
			<view :class="item.status ? 'follow' : 'active'" @click="myClick(item)">
				<text>{{ item.status ? '已关注' : '未关注' }}</text>
			</view>
		</view>
		<view v-else>
			<hmgero-empty></hmgero-empty>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		apiGetLikeList,
		apiDelArticPassivity
	} from "@/api/articleApi.js"
	import {
		BASE_IMG
	} from "@/utils/imgComBaseUrl.js"

	const isShow = ref(true)
	const {
		userId,
		userName,
	} = uni.getStorageSync("userInfo");
	// 定义点击事件处理函数
	async function myClick(item){
		item.status = !item.status
		
		let parm = {
			userId: userId,
			userName: userName,
			passivityId: item.userId,
			passivityName: item.userName,
		}
		
		const res = await apiDelArticPassivity(parm)
	}

	//查询关注列表
	const userList = ref([])
	async function likeList() {
		const {
			data
		} = await apiGetLikeList(userId)
		const filteredList = data.filter(item => item.status);
		userList.value = filteredList

	}
	likeList()
</script>

<style lang="scss" scoped>
	.focus {
		height: 100%;
		background-color: #ffffff;
		padding: 40rpx 32rpx;

		.item {
			display: flex;
			align-items: center;
			margin-bottom: 52rpx;

			.image {
				width: 120rpx;
				height: 120rpx;

				>image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 60rpx;
				}
			}

			.cent {
				flex: 1;
				display: flex;
				flex-direction: column;
				margin-left: 32rpx;

				.nick {
					font-family: OpenSans-Bold;
					font-size: 28rpx;
					font-weight: bold;
					line-height: 40rpx;
					letter-spacing: 0rpx;
					color: #0d0e15;
				}

				.text {
					font-family: OpenSans;
					font-size: 24rpx;
					font-weight: normal;
					line-height: 38rpx;
					letter-spacing: 0rpx;
					color: #768196;
				}
			}

			.follow {
				width: 198rpx;
				height: 60rpx;
				text-align: center;
				border-radius: 12rpx;
				background: linear-gradient(287deg, #dc4dce 0%, #dc4dce 0%, #ff8b8b 100%, #ff8b8b 100%);

				>text {
					font-family: OpenSans-Bold;
					font-size: 30rpx;
					font-weight: bold;
					line-height: 56rpx;
					letter-spacing: 0rpx;
					color: #ffffff;
				}

				&:active {
					opacity: 0.7;
				}
			}

			.active {
				width: 198rpx;
				height: 60rpx;
				text-align: center;
				border-radius: 12rpx;
				background: #e0e2e7;

				>text {
					font-family: OpenSans-Bold;
					font-size: 30rpx;
					font-weight: bold;
					line-height: 56rpx;
					letter-spacing: 0rpx;
					color: #0d0e15;
				}

				&:active {
					opacity: 0.7;
				}
			}
		}
	}
</style>